<div class="field-input-design">
  <div>

    <ng-container [ngSwitch]="elem.input">

      <ng-container *ngSwitchCase="'textarea'">
        <textarea type="text" rows="3" class="form-control form-control-sm"></textarea>
      </ng-container>

      <ng-container *ngSwitchCase="'dropdown'">
        <select class="form-control form-control-sm">
          <option value="">请选择</option>
        </select>
      </ng-container>

      <ng-container *ngSwitchCase="'radio'">
        <label class="col-form-label">
          <input value="1" type="radio"> <span>选项一</span>&nbsp;
          <input value="2" type="radio"> <span>选项二</span>
        </label>
      </ng-container>

      <ng-container *ngSwitchCase="'checkbox'">
        <label class="col-form-label">
          <input value="1" type="checkbox"> <span>选项一</span>&nbsp;
          <input value="2" type="checkbox"> <span>选项二</span>
        </label>
      </ng-container>

      <ng-container *ngSwitchCase="'multi_select'">
        <select multiple class="form-control form-control-sm">
          <option value="1">选项一</option>
          <option value="2">选项二</option>
        </select>
      </ng-container>

      <ng-container *ngSwitchCase="'richtext'">
        <textarea type="text" rows="3" class="form-control form-control-sm">MarkDown语法支持</textarea>
      </ng-container>

      <ng-container *ngSwitchCase="'date'">
        <div class="input-group my-flatpickr-date">
            <input type="text" readonly="readonly"
                   class=" form-control form-control-sm" placeholder="yyyy-mm-dd" data-input>
            <a class="input-group-addon" title="选择" data-toggle>
              <i class="fa fa-calendar"></i>
            </a>
            <a class="input-group-addon" title="清除" data-clear>
              <i class="fa fa-remove"></i>
            </a>
        </div>
      </ng-container>

      <ng-container *ngSwitchCase="'time'">
        <div class="input-group my-flatpickr-time">
          <input type="text" readonly="readonly"
                 class=" form-control form-control-sm" placeholder="hh:mm" data-input>
          <a class="input-group-addon" title="选择" data-toggle>
            <i class="fa fa-calendar"></i>
          </a>
          <a class="input-group-addon" title="清除" data-clear>
            <i class="fa fa-remove"></i>
          </a>
        </div>
      </ng-container>

      <ng-container *ngSwitchCase="'datetime'">
        <div class="input-group my-flatpickr-datetime">
          <input type="text" readonly="readonly"
                 class=" form-control form-control-sm" placeholder="yyyy-mm-dd hh:mm" data-input>
          <a class="input-group-addon" title="选择" data-toggle>
            <i class="fa fa-calendar"></i>
          </a>
          <a class="input-group-addon" title="清除" data-clear>
            <i class="fa fa-remove"></i>
          </a>
        </div>
      </ng-container>

      <ng-container *ngSwitchDefault>
        <input type="text" class="form-control form-control-sm">
      </ng-container>

    </ng-container>

  </div>
</div>
